<template>
<div class="pageB">
  <div class="address">
    <div class="address-item item1">
      <div class="address-title">省</div>
      <i-select style="width:80%" placeholder="全部" clearable :value='sheng_id' @on-change="shengChange">
        <i-option v-for="item in shengList" :value="item.id" :key="item.id">{{ item.city_name }}</i-option>
      </i-select>
    </div>
    <div class="address-item item2" >
      <div class="address-title">市</div>
      <i-select style="width:80%" placeholder="全部" :value='shi_id' @on-change="shiChange" clearable>
        <i-option v-for="item in shiList" :value="item.id" :key="item.id">{{ item.city_name }}</i-option>
      </i-select>
    </div>
    <div class="address-item item3" >
      <div class="address-title">区</div>
      <i-select style="width:80%" placeholder="全部" :value='qu_id'  @on-change="quChange" clearable>
        <i-option v-for="item in quList" :value="item.id" :key="item.id">{{ item.city_name }}</i-option>
      </i-select>
    </div>
  </div>
</div>
</template>
<script>
import { city } from '@/api/api'
export default {
  data(){
    return{
      list:[],
      city_id:1,
      shi_id:'',
      qu_id:'',
      sheng_id:'',
      shengList:[],
      shiList:[],
      quList:[],
      cityItem:{city_name:''},
      city_type:'',
    }
  },
  created(){
    this.city_id=1
    this.cityItem={city_name:''}
    this.getCity()
  },
  methods:{
    getCity(){
      city({city_id:this.city_id}).then(res=>{
        if(this.city_id==1){
          this.shengList=res.data
        }else if(this.city_type==1){
          this.shiList=res.data
        }else{
          this.quList=res.data
        }
      })
    },
    shengChange(id,city_name=''){
      this.sheng_id=id
      this.qu_id = 0
      this.shi_id = 0
      this.quList=[]
      this.shiList=[]
      let index= this.shengList.findIndex(item=>item.id==id)
      if(index!=-1){
        this.shiList = this.shengList[index].children
        this.city_id = id
        this.cityItem=this.shengList[index]
        this.$emit('changeCity',this.cityItem)
      }else{
        this.city_id = 1
        this.cityItem={city_name:''}
        this.$emit('changeCity',{city_name:''})
      }
    },
    shiChange(id){
      this.shi_id=id
      this.qu_id = 0
      this.quList=[]
      let index= this.shiList.findIndex(item=>item.id==id)
      if(index!=-1){
        this.quList = this.shiList[index].children
        this.city_id = id
        this.cityItem=this.shiList[index]
        this.$emit('changeCity',this.shiList[index])
      }else{
        this.cityItem= this.shengList.find(item=>item.id==this.sheng_id)||this.cityItem||{city_name:''}
        this.city_id = this.sheng_id?this.sheng_id:''
        this.$emit('changeCity',this.cityItem)
      }
    },
    quChange(id){
      this.qu_id=id
      if(id){
        this.cityItem= this.quList.find(item=>item.id==id)
        this.city_id = id
        this.$emit('changeCity',this.cityItem)
      }else{
        this.cityItem= this.shiList.find(item=>item.id==this.shi_id)||this.shengList.find(item=>item.id==this.sheng_id)||{city_name:''}
        this.city_id = this.shi_id||this.sheng_id
        this.$emit('changeCity',this.cityItem)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/_select.scss';
.pageB{
  height: 100%;
  width: 100%;
  // @include  bg-image('../../assets/img/itemBg');
  border: 1px solid rgba(88,231,255,0.6);
  border-radius: 5px;
  box-shadow:0px 0px 30px 0px rgba(33,90,193,0.9) inset;
  background-size: 100% 100%;
  padding: 0 10px;
  position: relative;
  &::v-deep .item1 .ivu-select-dropdown{
    left: 130px !important;
    top: 0px !important;
  }
  &::v-deep .item2 .ivu-select-dropdown{
    left: 130px !important;
    top: 45px !important;
  }
  &::v-deep .item3 .ivu-select-dropdown{
    left: 130px !important;
    top: 90px !important;
  }
  .address{
    margin-bottom: 6px;
    font-size: 16px;
    // min-width: 400px;
    position: relative;
    .address-item{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      color: rgba(88, 231, 255, 1) !important;
      .address-title{
        margin-right: 4px;
      }
      .calcW{
        width: calc(100% - 46px);
      }
    }
    .width50{
      width: 45%;
    }
    .big{
      width: 100%;
    }
  }
}
</style>